<template>
  <div class="main_header">
    <el-form label-width="110px" :model="Form">
      <el-row :gutter="60"
        ><!--  -->
        <el-col :span="8"
          ><el-form-item label="运输任务编号:" prop="transportTaskId">
            <el-input
              placeholder="请输入运输任务编号"
              v-model="Form.transportTaskId"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="起始地机构:">
            <el-select
              placeholder="请选择起始地机构"
              style="width: 100%"
            ></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="目的地机构:">
            <el-select
              placeholder="请选择目的地机构"
              style="width: 100%"
            ></el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="60">
        <el-col :span="8">
          <el-form-item label="回车时间:">
            <div class="block" style="width: 100%">
              <span class="demonstration"></span>
              <el-date-picker
                v-model="value2"
                type="datetimerange"
                align="center"
                start-placeholder="开始日期"
                range-separator="至"
                end-placeholder="结束日期"
                :default-time="['12:00:00', '08:00:00']"
                style="width: 100%"
              >
              </el-date-picker></div
          ></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆是否可用:">
            <el-select placeholder="请选择" style="width: 100%">
              <el-option label="全部" value="shanghai"></el-option>
              <el-option label="可用" value="beijing"></el-option>
              <el-option label="不可用" value="beijing"></el-option
            ></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="add">搜索</el-button>
          <el-button type="primary" class="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="main_body">
      <el-table style="width: 100%" height="250">
        <el-row>
          <el-col>
            <el-table-column fixed prop="date" label="运输任务编号">
            </el-table-column
          ></el-col>
          <el-col>
            <el-table-column prop="name" label="起始地机构"> </el-table-column
          ></el-col>
          <el-col>
            <el-table-column prop="province" label="目的地机构">
            </el-table-column
          ></el-col>
          <el-col>
            <el-table-column prop="city" label="运单数量"> </el-table-column
          ></el-col>
          <el-col>
            <el-table-column prop="address" label="出车时间"> </el-table-column
          ></el-col>
          <el-col
            ><el-table-column prop="zip" label="回车时间"> </el-table-column
          ></el-col>
          <el-col>
            <el-table-column prop="zip" label="车牌号码"> </el-table-column
          ></el-col>
          <el-col
            ><el-table-column prop="zip" label="车辆是否可用"> </el-table-column
          ></el-col>
          <el-col>
            <el-table-column prop="zip" label="操作"> </el-table-column>
          </el-col>
        </el-row>
        <template #empty>
          <div class="empty">
            <img src="../../assets/empty.png" alt="" class="empty" />
            <span>这里空空如也</span>
          </div>
        </template>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getCarList } from "../../api/car-register";
export default {
  name: "CarRegister",
  data() {
    return {
      Form: {
        transportTaskId: "",
        startAgencyName: "",
        endAgencyName: "",
        intoStorageTime: "",
        isAvailable: "",
      },
    };
  },
  methods: {
    async add() {
      const res = await getCarList();
      console.log(res);
    },
  },
};
</script>

<style lang="scss" scoped>
.main_header {
  background-color: #f3f5f9;
}
.el-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}
.el-form-item__label {
  font-weight: 400;
}
.el-input__inner {
  font-size: 14px;
  border-radius: 5px;
}
.el-button {
  padding: 10px 20px;
}
.reset {
  background-color: #fff;
  color: #606266;
  border-color: #dcdfe6;
}
.main_body {
  margin-top: 20px;
  background-color: #fff;
  border-radius: 5px;

  padding: 28px;
}
.el-table_3_column_28 {
  text-align: center;
}
.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  img {
    width: 150px;
  }
}
</style>
